{extend name="base" /}
{block name="css"}
<link rel="stylesheet" href="/static/hqui/module/dtree/dtree.css"/>
<link rel="stylesheet" href="/static/hqui/module/dtree/font/dtreefont.css"/>
<link rel="stylesheet" href="/static/hqui/module/admin.css?v=316"/>
<style>
    #treeTbTree {
        height: 720px;
        overflow: auto;
    }

    @media screen and (max-width: 768px) {
        #treeTbTree {
            height: auto;
        }
    }

    /** dtree选中颜色重写 */
    .dtree-theme-item-this {
        background-color: #eeeeee !important;
    }
</style>
<style>
    .ew-iframe-body {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        overflow: auto;
    }
</style>
{/block}
{block name="body"}
<!-- 正文开始 -->

<div class="layui-row layui-col-space15">
    <!-- 左树 -->
    <div class="layui-col-sm12 layui-col-md4 layui-col-lg2">
        <div class="layui-card">
            <div class="layui-card-body mini-bar" id="treeTbTree">
            </div>
        </div>
    </div>
    <!-- 右表 -->
    <div class="layui-col-sm12 layui-col-md8 layui-col-lg10">
        <div class="layui-card">
            <div class="layui-card-header">
                <form action="{:url('admin/article/index')}" class="layui-form" method="get">
                    <div class="layui-form-item">
                        <div class="layui-input-inline">
                            <input type="text" name="title" value="{:input('title')}" autocomplete="off" placeholder="请输入标题" class="layui-input"/>
                        </div>
                        <div class="layui-input-inline">
                            <select name="cid">
                                <option value="">全部分类</option>
                                {foreach name="category" item="v"}
                                <option value="{$v.id}" {if condition="input('cid') eq $v.id" }selected="selected"{/if}>{neq name="v.level" value="1"}|{for start="1" end="$v.level"} ----{/for}{/neq} {$v.name}</option>
                                {/foreach}
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="is_top">
                                <option value="">是否置顶</option>
                                <option value="1" {if condition="input('?is_top') and (input('is_top') eq 1)"} selected="selected"{/if}>是</option>
                                <option value="0" {if condition="input('?is_top') and (input('is_top') eq 0)"} selected="selected"{/if}>否</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="is_hot">
                                <option value="">是否推荐</option>
                                <option value="1" {if condition="input('?is_hot') and (input('is_hot') eq 1)"} selected="selected"{/if}>是</option>
                                <option value="0" {if condition="input('?is_hot') and (input('is_hot') eq 0)"} selected="selected"{/if}>否</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <select name="status">
                                <option value="">是否发布</option>
                                <option value="1" {if condition="input('?status') and (input('status') eq 1)"} selected="selected"{/if}>是</option>
                                <option value="0" {if condition="input('?status') and (input('status') eq 0)"} selected="selected"{/if}>否</option>
                            </select>
                        </div>
                        <div class="layui-input-inline">
                            <button class="layui-btn layui-btn-primary ajax-search"><i class="fa fa-search"></i></button>
                        </div>
                    </div>
                </form>
                <div class="layui-btn-group">
                    <a href="{:url('admin/article/add', ['cid' => input('cid')])}" class="layui-btn"><i class="fa fa-plus-circle"></i> 添加数据</a>
                    <a href="{:url('admin/article/del')}" class="layui-btn layui-btn-danger ajax-batch"><i class="fa fa-trash-o"></i> 批量删除</a>
                    <a href="{:url('admin/article/edit', ['name' => 'is_top', 'value' => '1'])}" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-star"></i> 设置置顶</a>
                    <a href="{:url('admin/article/edit', ['name' => 'is_top', 'value' => '0'])}" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-times-circle"></i> 取消置顶</a>
                    <a href="{:url('admin/article/edit', ['name' => 'is_hot', 'value' => '1'])}" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-thumbs-up"></i> 设置推荐</a>
                    <a href="{:url('admin/article/edit', ['name' => 'is_hot', 'value' => '0'])}" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-times-circle"></i> 取消推荐</a>
                    <a href="{:url('admin/article/edit', ['name' => 'status', 'value' => '1'])}" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-send"></i> 设置发布</a>
                    <a href="{:url('admin/article/edit', ['name' => 'status', 'value' => '0'])}" class="layui-btn layui-btn-primary ajax-batch"><i class="fa fa-times-circle"></i> 取消发布</a>
                </div>
            </div>
            <table id="tableTbTree" lay-filter="tableTbTree"></table>
            <!-- 表格操作列 -->
            <script type="text/html" id="tableTBOrder">
                <a href="{:url('admin/article/edit')}?id={{d.id}}" class="layui-btn layui-btn-sm">修改</a>
                <a href="{:url('admin/article/del')}?id={{d.id}}" class="layui-btn layui-btn-danger layui-btn-sm ajax-delete">删除</a>
            </script>
            <!-- 权限列 -->
            <script type="text/html" id="is_top">
                <input type="checkbox" name="is_top" lay-skin="switch" lay-filter="*" lay-text="是|否" data-url="{:url('admin/article/edit')}?id={{d.id}}" {{d.is_top==1?'checked':''}}>
            </script>
            <!-- 权限列 -->
            <script type="text/html" id="is_hot">
                <input type="checkbox" name="is_hot" lay-skin="switch" lay-filter="*" lay-text="是|否" data-url="{:url('admin/article/edit')}?id={{d.id}}" {{d.is_hot==1?'checked':''}}>
            </script>
            <!-- 权限列 -->
            <script type="text/html" id="status">
                <input type="checkbox" name="status" lay-skin="switch" lay-filter="*" lay-text="发布|禁用" data-url="{:url('admin/article/edit')}?id={{d.id}}" {{d.status==1?'checked':''}}>
            </script>
            <!-- 权限列 -->
            <script type="text/html" id="sort_order">
                <input type="text" name="sort_order" value="{{d.sort_order}}" autocomplete="off" class="layui-input ajax-update" data-url="{:url('admin/article/edit')}?id={{d.id}}">
            </script>

        </div>
    </div>

</div>

{/block}
{block name="js"}
<script>
    layui.extend({dtree:'dtree/dtree'}).use(['layer', 'form', 'table', 'util', 'dtree', 'index'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var dtree = layui.dtree;
        var admin = layui.admin;
        var dropdown = layui.dropdown;
        var index = layui.index;
        var cid = "{$cid}";
        // 渲染表格
        var insTb = table.render({
            elem: '#tableTbTree',
            url: '/admin/article/get_content?cid='+ cid,
            page: true,
            limit:15,
            limits:[15,30,45,60,75,90],
            cellMinWidth: 100,
            cols: [[
                {type:'checkbox',title:'#'},
                {field: 'title', align: 'left', sort: true, title: '标题', minWidth: 380},
                {field: 'category_name', align: 'center', sort: true, title: '栏目', width:120},
                {align: 'center', sort: true, title: '排序',templet:'#sort_order',width:120},
                {align: 'center', sort: true, title: '置顶',templet:'#is_top',width:100},
                {align: 'center', sort: true, title: '热门',templet:'#is_hot',width:100},
                {align: 'center', sort: true, title: '状态',templet:'#status',width:100},
                {field: 'create_time', align: 'center', sort: true, title: '时间',width:160},
                {align: 'center', toolbar: '#tableTBOrder', title: '操作',width: 170}
            ]],
            parseData: function(res){ //res 即为原始返回的数据
                return {
                  "code": res.code, //解析接口状态
                  "msg": res.msg, //解析提示文本
                  "count": res.data.total, //解析数据长度
                  "data": res.data.data //解析数据列表
                };
            }
        });

        // 树形渲染
        dtree.render({
            elem: '#treeTbTree',
            url: '/admin/article/get_category_tree',
            type:'all',
            initLevel: '3',
            dot: true,
            line:true,
            method: 'GET'
        });

        // 树形点击事件
        dtree.on('node("treeTbTree")', function (obj) {
            var data = obj.param;
            //判断点开页面
            if(data.isLeaf === true){
                console.log(obj.parentParam)
                console.log(data);
                index.openTab({
                    title: data.context, 
                    url: "{:url('admin/article/index')}?cid=" + data.nodeId,
                    end: function() {
                        // insTb.reload(); 
                    }
                });
            }
        });

    });
</script>
{/block}